<template>
  <view
    class="hydropower_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 菜单导航栏 -->
    <menu-navigation-bar
      :menu-list="menuList"
      :is-sticky="true"
      :is-bold="false"
      @on-selected="onMenuSelect"
    />

    <!-- 内容 -->
    <view class="content">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="msg">
          <view v-if="menuIndex == 0">{{ format.numHandler(item.water)  }}</view>
          <view v-else-if="menuIndex == 1">{{ format.numHandler(item.electricity) }}</view>
          <view v-else>{{ format.numHandler(item.cng) }}</view>
        </view>
        <view>{{ item.createTime }}</view>
      </view>
    </view>
    <!-- 加载状态 -->
    <load :status="loadStatue" :isImage="dataList.length<1" />
  </view>

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />
</template>

<!-- 水电读数页面 -->
<script lang="ts" setup>
import { refreshHandler } from '@/components/common/pull_down_refresh/index'
import { ReqSelectPageHydropower } from '@/api/resourceUsage'
import menuNavigationBar from '@/components/layout/menu_navigation_bar/menu-navigation-bar.vue'
import type { PageHydropower, QueryPageByHydropower } from '@/config/data/data'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import format from '@/util/format'

//菜单列表
const menuList = ref<string[]>(['电表:度', '水表:吨', '天然气:立方米'])

//当前选中下标
const menuIndex = ref(0)

//菜单变更
const onMenuSelect = (index: number) => {
  menuIndex.value = index
  uni.pageScrollTo({ scrollTop: 0, duration: 0 })
}

//数据列表
const dataList = ref<PageHydropower[]>([])

//下拉刷新控制函数
const refresh = refreshHandler(300)

//请求参数
const queryPage = ref<QueryPageByHydropower>({
  page: 0,
  size: 31,
  houseId: 1,
})

//防重复请求
const isReq = ref(true)

//监听下拉刷新状态
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      //开启刷新，并请求
      queryPage.value.page = 0
      nextData(true).finally(() => {
        refresh.refreshEnd(500)
      })
    }
  }
)

//加载状态
const loadStatue = ref(1)

/**
 * 下一页数据
 * @param refresh:是否刷新
 * @returns 返回一个Promise标识请求结束
 */
const nextData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    //上个请求并未结束,或者 已经没有更多 同时不是刷新状态下
    if ((!isReq.value || loadStatue.value == -1) && !refresh) {
      reslove(true)
      return
    }
    queryPage.value.page += 1
    isReq.value = false
    loadStatue.value = 0
    ReqSelectPageHydropower(queryPage.value)
      .then((res) => {
        if (res.code == 200 && res.data) {
          refresh ? (dataList.value = []) : ''
          dataList.value.push(...res.data)
          loadStatue.value = res.data.length == queryPage.value.size ? 1 : -1
        }
      })
      .catch(() => {
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        isReq.value = true
        reslove(true)
      })
  })
}

//页面加载
onLoad(() => {
  nextData()
})

//页面滑动到底部
onReachBottom(() => {
  nextData()
})
</script>

<style scoped lang="scss">
.hydropower_box {
  width: 100vw;
  min-height: 100vh;
  background-color: $uni-bg-color;
  .content {
    width: calc(100% - 80rpx);
    padding: 0 40rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
    }
  }
}
</style>
